<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
  <script language="javascript" type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
</head>
    <body>
        <textarea id="textarea" >
           Welcome to TinyMCE!

        </textarea>
        <form action="/hexu/worker/add/article" >
          <input type="submit" value="发布"/>
        </form>

        <script>
          tinymce.init({
            selector: 'textarea',
            plugins: 'image code',
            toolbar: 'undo redo | link image | code',
            //在图像对话框中启用标题字段
            image_title: true,
            // 可以自动上传由blob或数据uri表示的图像
            automatic_uploads: true,
            // images_upload_handler: example_image_upload_handler,
            //这里我们只在图像对话框中添加自定义文件选择器
            file_picker_types: 'image',
            //自定义图像选择器
            file_picker_callback: function (cb, value, meta) {
              var input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.setAttribute('accept', 'image/*');

              input.onchange = function () {
                var file = this.files[0];

                var reader = new FileReader();
                reader.onload = function () {

                  var id = 'blobid' + (new Date()).getTime();
                  var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                  var base64 = reader.result.split(',')[1];
                  var blobInfo = blobCache.create(id, file, base64);
                  blobCache.add(blobInfo);

                  //调用回调函数，并使用文件填充Title字段。
                  cb(blobInfo.blobUri(), { title: file.name });
                };
                //显示图片
                reader.readAsDataURL(file);
              };

              input.click();
            },
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          });



        </script>
    </body>
</html>